<template>
  <div class="publish-container">
    <!-- 卡片模式 -->
    <el-card>
      <!-- 卡片上部 -->
      <div slot="header">
        <!-- 面包屑导航 -->
        <el-breadcrumb>
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 发布文章_表单 -->
      <el-form
        ref="form"
        :model="article"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item
          label="标题"
          prop="title"
        >
          <el-input v-model="article.title"></el-input>

        </el-form-item>
        <el-form-item
          label="内容"
          prop="content"
        >
          <!-- <el-input type="textarea" v-model="article.content"></el-input> -->
          <quill-editor
            v-model="article.content"
            :options=" editorOption"
          >

          </quill-editor>
        </el-form-item>
        <el-form-item label=" 封面">
          <el-radio-group
            v-model="article.cover.type"
            @change="typeChange"
          >
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="频道"
          prop="channel_id"
        >
          <el-select
            placeholder="请选择活动区域"
            v-model="article.channel_id"
          >
            <el-option
              v-for="obj in ChannelArr"
              :key="obj.id"
              :label="obj.name"
              :value="obj.id"
            ></el-option>

          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="fabiaoFn(false)"
          >发表</el-button>
          <el-button @click="fabiaoFn(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 接口
import { getChannelAPI, articleAddAPI, getArticleIdAPI, putArticleAPI } from '@/api'
// 规则
import { articleRules } from '@/verify/index'
// 富文本插件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'articleAdd',
  data () {
    return {
      article: {
        title: '',
        content: '',
        cover: {
          type: 0,
          images: []
        },
        channel_id: ''
      },

      ChannelArr: [], // 请求回来的数据
      // getarrbyId: [], // 请求回来的id
      editorOption: {
        // 富文本配置项
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗, 斜体, 下划线, 删除线
            ['blockquote', 'code-block'], // 双引号和代码
            [{ header: 1 }, { header: 2 }], // h几字体图标
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表, 无序列表
            [{ indent: '-1' }, { indent: '1' }], // 缩进-1, 缩进1 按钮
            ['image'] // 图片插件
          ]
        }
      },
      rules: articleRules,
      articleId: -1 // 正在编辑的文章id

    }
  },
  methods: {
    fabiaoFn (bool) {
      this.$refs.form.validate(async valid => {
        if (valid === false) return
        // console.log(bool)
        if (this.articleId !== -1) { // 获取文章
          await putArticleAPI(this.articleId, { draft: bool }, this.article)
          this.$message({
            message: '跟新文章成功',
            type: 'success'
          })
          this.$router.replace('/layout/articleList')
        } else {
          await articleAddAPI({ draft: bool }, this.article)

          // console.log(res)
          this.$message({
            message: '发布成功',
            type: 'success'
          })
        }

        Object.assign(this.article, this.$options.data().article)
      })
    },
    typeChange () {
      if (this.article.cover.images === 0 || this.article.cover.images === -1) {
        this.article.cover.images = [] // 将cover下的images清空
      }
    }
  },
  async created () {
    const res = await getChannelAPI()// 获取频道列表
    this.ChannelArr = res.data.data.channels
    // 判断
    const articleId = this.$route.query.id // 获取id

    const artIdRes = await getArticleIdAPI(articleId)
    console.log(artIdRes.data.data)
    this.article = artIdRes.data.data // 获取16id
    // console.log(artIdRes)
  },
  components: {
    quillEditor
  }
}
</script>

<style lang="less" scoped >
// 在父组件中去设置子组件的样式，加上/deep/ 实现穿透功能
.publish-container /deep/ .ql-editor {
  height: 300px;
}
.publish-container /deep/ .ql-toolbar.ql-snow {
  padding: 0 8px;
}
</style>
